import { View, Text } from "@tarojs/components";
import React, { useEffect, useState } from "react";
import http from "@/request";
import OperateList from "@/components/operateList";
import moment from "moment";
import { ShowToast } from "@/utils";
import Taro from "@tarojs/taro";
import { accountType } from "@/types";
import "./index.scss"

interface exportConfigType {
    startDate?: string,
    endDate?: string,
    time?: 1 | 3 | 0,
    type?: 0 | 1 | 2,
    hasNote?: boolean,
    accountId?: number,
    url?: string,
    accountName?: string,
    createTime?: string
}

const ExportHistory: React.FC<{account?: accountType}> = ({account}) => {

    const [historyList, setHistoryList] = useState<{
        id: number,
        url: string,
        createdTime: string,
        startDate: string,
        endDate: string
    }[]>([])

    const getList = () => {
        http.post('/export-import/list', {
            accountId: account?.id
        }).then(res => {
            setHistoryList(res.data || [])
        })
    }

    useEffect(() => {
        getList()
    }, [account])

    const copyUrl = (item: exportConfigType) => {
        Taro.setClipboardData({
            data: item.url || '',
            success: () => {
                ShowToast('下载地址已复制到剪贴板')
            },
            fail: () => {
                ShowToast('复制失败')
            }
        });
    }

    const recordItem: React.FC<{ item: exportConfigType }> = (props) => {
        const record = props as unknown as exportConfigType
        return <View className="export-record-item flex-row flex-item">
            <View className="export-record-info-container">
                <View className="list-item-row font-size24 flex-row">
                    <Text>导入时间段：</Text>
                    <Text>{record.startDate} - {record.endDate}</Text>
                </View>
                <View className="list-item-row font-size24 flex-row flex1">
                    <Text>账本名称：</Text>
                    <Text>{account?.name}</Text>
                    {record.hasNote ? <Text>（含账单备注）</Text> : null}
                </View>
                <View className="list-item-row font-size24 flex-row">
                    <Text>导出时间：</Text>
                    <Text>{moment(record.createTime).format('YYYY-MM-DD HH:mm:ss')}</Text>
                </View>
            </View>
            <View className="move-action flex-row">
                <View onClick={() => copyUrl(record)} className="flex1 flex-row flex-center active-btn">
                    <Text className="iconfont icon-base-edit2"></Text>
                    <Text>复制地址</Text>
                </View>
                <View className="flex1 flex-row flex-center active-btn">
                    <Text className="iconfont icon-base-del"></Text>
                    <Text>删除</Text>
                </View>
            </View>
        </View>
    }

    return (
        <View className="export-history">
            {
                historyList.length ?
                <View className="tip font-size24">左划可以复制下载链接或删除记录</View>:
                null
            }
            <OperateList
                num={2}
                noDataTitle="当前账本没有导出记录"
                noDataDesc="在账单导出栏中可以导出数据"
                listData={historyList || []}
                childNode={recordItem}>
            </OperateList>
        </View>
    )
}

export default ExportHistory